<template>
  <div class="new" @click="$router.push('./articleDetails/' + item.id)">
    <!-- 单个图片 -->
    <div
      class="single"
      v-if="item.type == 1 && item.cover.length >= 1 && item.cover.length < 3"
    >
      <div class="right">
        <div class="title">{{ item.title }}</div>
        <div class="publisher">
          <span class="reply">{{ item.user.nickname }}</span>
          <span class="comments">{{ item.comment_length }}跟帖</span>
        </div>
      </div>
      <div class="left">
        <img :src="fnFixImgUrl(item.cover[0].url)" alt="" />
      </div>
    </div>
    <!-- 多张图片 -->
    <div class="multiple" v-if="item.type == 1 && item.cover.length >= 3">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="img">
        <img :src="fnFixImgUrl(item.cover[0].url)" alt="" />
        <img :src="fnFixImgUrl(item.cover[1].url)" alt="" />
        <img :src="fnFixImgUrl(item.cover[2].url)" alt="" />
      </div>
      <div class="publisher">
        <span class="reply">{{ item.user.nickname }}</span>
        <span class="comments">{{ item.comment_length }}跟帖</span>
      </div>
    </div>
    <!-- 为视频时候 -->
    <div class="video" v-if="item.type == 2 && item.cover.length >= 1">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="img">
        <img :src="$axios.defaults.baseURL + item.cover[0].url" alt="" />
      </div>
      <div class="publisher">
        <span class="reply">{{ item.user.nickname }}</span>
        <span class="comments">{{ item.comment_length }}跟帖</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  mounted() {},
  methods: {
    fnFixImgUrl(oldUrl) {
      const reg = /^http/;

      if (reg.test(oldUrl)) {
        return oldUrl;
      } else {
        return this.$axios.defaults.baseURL + oldUrl;
      }
    },
  },
  filters: {
    fixImgUrl(oldUrl) {
      // 我不确定后台给我返回到底是完全的图片路径
      // 还是想头像一样, 返回相对路径
      // 1. 创建正则校验
      const reg = /^http/;

      // 过滤器本身是一个纯函数
      // 不依赖当前的程序状态
      // 固定的输入, 一定有相同的输出
      // 不产生副作用

      // filter 只是用来转换字符串格式

      console.log("这里是局部过滤器");
      console.log(this);
      if (reg.test(oldUrl)) {
        return oldUrl;
      } else {
        return "http://157.122.54.189:9083" + oldUrl;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.new {
  .single {
    display: flex;
    justify-content: space-between;
    padding: 15 /360 * 100vw 13 /360 * 100vw;
    border-bottom: 1px solid #ccc;
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 200 /360 * 100vw;
      .title {
        margin-top: 5 /360 * 100vw;
        font-size: 16 /360 * 100vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .publisher {
        margin-top: 8 /360 * 100vw;
        font-size: 12 /360 * 100vw;
        color: #ccc;
        .reply {
          margin-right: 5 /360 * 100vw;
        }
      }
    }
    .left {
      width: 112/360 * 100vw;
      height: 74 /360 * 100vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .multiple {
    padding: 15 /360 * 100vw 13 /360 * 100vw;
    border-bottom: 1px solid #ccc;
    .title {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
    .img {
      display: flex;
      justify-content: space-between;
      img {
        margin: 3 /360 * 100vw 0;
        width: 112 /360 * 100vw;
        height: 74 /360 * 100vw;
      }
    }
    .publisher {
      margin-top: 8 /360 * 100vw;
      font-size: 12 /360 * 100vw;
      color: #ccc;
      .reply {
        margin-right: 5 /360 * 100vw;
      }
    }
  }

  .video {
    padding: 15 /360 * 100vw 13 /360 * 100vw;
    border-bottom: 1px solid #ccc;
    .title {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
    .img {
      width: 100%;
      img {
        margin-bottom: 5 /360 * 100vw;
        width: 100%;
      }
    }
    .publisher {
      margin-top: 8 /360 * 100vw;
      font-size: 12 /360 * 100vw;
      color: #ccc;
      .reply {
        margin-right: 5 /360 * 100vw;
      }
    }
  }
}
</style>